<template>
	<!-- 外卖-订单详情 -->
	<view class="orderDetails public">
		<view class="empty"></view>
		<view class="main">
			<!-- 上部分 -->
			<view class="header">
				<!-- 服务时长，本单收入 first -->
				<view class="odd">单号：{{ arr.today_number }}</view>
				<view class="title">
					<view class="title-left" v-if="arr.order_status == 10">
						<view class="">
							<text>{{ serveDuration }}</text>分钟
						</view>
						<view class="">
							服务时长
						</view>
					</view>
					<view class="title-right">
						<view class="">
							<!-- <text>2.0</text>元 -->
							<text>{{ arr.goods_money || 0 }}</text>元
						</view>
						<view class="">
							本单收入
						</view>
					</view>
				</view>
				<!-- 服务时长，本单收入 end -->
				<!-- 地址 fitst -->
				<view class="address">
					<view class="addressTwo">
						<view class="main-main">
							<view class="">
								<steps></steps>
							</view>
							<view class="main-right">
								<view class="main-right-business">
									<view class="main-right-header">
										<!-- 信阳师范大学1食堂二楼201 -->
										{{ arr.site_info.full_address || '' }} {{ arr.site_info.address || '' }}
									</view>
									<view class="main-right-footer">
										<view class="">
											<!-- 商家<text>15445434543</text> -->
											{{ arr.site_name || '' }} <text>{{ arr.site_info.mobile || '' }}</text>
										</view>
									</view>
								</view>
								<view class="main-right-user" v-if="item.status !== 3">
									<view class="main-right-header">
										<!-- 信阳师范大学1宿舍楼301 -->
										{{ arr.full_address || '' }} {{ arr.address || '' }} {{ arr.house_number || '' }}
									</view>
									<view class="main-right-footer">
										<!-- 张三<text>19887656765</text> -->
										{{ arr.name || '' }} <text>{{ arr.mobile || '' }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 地址 end -->
				<!-- 订单商品明细 -->
				<view class="commodityInformation">
					<view class="tradeName">店铺名称：{{ options.site_name }}</view>
					<view class="mobile" @click="contactShop"><text>商家电话：</text>{{ options.site_info.mobile }}</view>
					<view class="tradeName">商品</view>
					<view class="goods" v-for="(goods, index) in options.order_goods" :key="index">{{ goods.sku_name }} * {{
						goods.num }}</view>
				</view>
			</view>

			<!-- 下部分 -->
			<view class="footer">
				<view class="information-item">
					<view class="information-item-left">
						订单编号
					</view>
					<view class="information-item-right">
						<view class="">
							<!-- 12736748959700 -->
							{{ arr.order_no || '' }}
						</view>
						<view class="copy" @click="copyOrderNo">
							复制
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						收入明细
					</view>
					<view class="information-item-right">
						<view class="information-item-right-main">
							<view class="">
								<!-- 基础费用<text>￥18.0</text> -->
								基础费用<text>￥{{ arr.goods_money || 0 }}</text>
							</view>
							<!-- <view class="">
								小费<text>￥{{ arr.delivery_money || 0 }}</text>
							</view> -->
						</view>
					</view>
				</view>
				<!-- <view class="information-item">
					<view class="information-item-left">
						合计收入
					</view>
					<view class="information-item-right">
						<view class="amountTo">
							￥40.0
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footer-button" v-if="options.statusTitleNum == 0 && options.order_status == 1">
			<button @click="ReceivingOrders">接单</button>
		</view>
		<!-- 待取货 -->
		<view class="footer-button" v-if="options.statusTitleNum == 1">
			<!-- <view class="" @click="MakingPhoneCalls(options)">
				<image src="../static/phone.png" mode=""></image>
				<text>联系商家</text>
			</view> -->
			<button @click="pickUp(options)">确认取货</button>
		</view>
		<!-- 待送达 -->
		<view class="footer-button" v-if="options.statusTitleNum == 2">
			<!-- <view class="" @click="MakingPhoneCalls(options)">
				<image src="../static/phone.png" mode=""></image>
				<text>联系收货</text>
			</view> -->
			<button @click="service(options)">我已送达</button>
		</view>
	</view>
</template>

<script>
import steps from '../components/package/steps/steps.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		steps
	},
	data() {
		return {
			options: [],
			arr: [],
			// 服务时长
			serveDuration: 0
		}
	},
	onLoad(options) {
		this.options = JSON.parse(options.item)
		console.log(this.options);
		this.orderGoodsDetails()
	},
	methods: {
		// 订单详情
		orderGoodsDetails() {
			$api.postOrderGoodsDetails({
				order_id: this.options.order_id
			}).then(res => {
				this.arr = res.data.data
				this.duration()
			})
		},
		ReceivingOrders() {
			$api.postReceivingOrders({
				order_id: this.options.order_id
			}).then(res => {
				this.orderGoodsDetails()
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: "none",
					duration: 2000,
				});
			})
		},
		// 复制订单号
		copyOrderNo() {
			uni.setClipboardData({
				// data: '123456789',
				data: this.arr.order_no,
				success() {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				},
				fail() {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				}
			})
		},
		MakingPhoneCalls(item) {
			uni.makePhoneCall({
				phoneNumber: item.mobile
			})
		},
		pickUp(item) {
			$api.postPickUp({
				// token: uni.getStorageSync('token'),
				order_id: item.order_id
			}).then(res => {
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				})
			})
		},
		service(item) {
			$api.postService({
				// token: uni.getStorageSync('token'),
				order_id: item.order_id
			}).then(res => {
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				})
			})
		},
		// 联系商家
		contactShop() {
			uni.makePhoneCall({
				phoneNumber: this.options.site_info.mobile
			})
		},

		// 计算服务分钟
		duration() {
			// 将时间戳转换为 Date 对象
			let date1 = new Date(this.arr.jiedan_time * 1000);
			let date2 = new Date(this.arr.sign_time * 1000);
			// 计算两个日期对象的时间差（单位为毫秒）
			let diffMs = date2 - date1;
			// 将毫秒转换为分钟
			let diffMinutes = Math.floor(diffMs / (1000 * 60));
			this.serveDuration = diffMinutes
		}
	}
}
</script>

<style lang="less" scoped>
.orderDetails {
	background: #F7F7F7;

	// 空
	.empty {
		height: 20rpx;
	}

	.main {
		width: 702rpx;
		// height: 1074rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
		border-radius: 20rpx;
		margin: auto;
		// padding-bottom: 42rpx;
		padding-bottom: 30rpx;

		.header {
			width: 640rpx;
			border-bottom: 1px solid #F2F2F2;
			margin: auto;

			.odd {
				text-align: center;
				padding-top: 20px;
				font-size: 50rpx;
			}

			// 服务时长，本单收入
			.title {
				display: flex;
				justify-content: space-around;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #383838;
				padding: 81rpx 0 65rpx 0;

				.title-left {
					view:first-child {
						font-size: 30rpx;

						text {
							font-size: 48rpx;
							font-weight: 500;
							color: #F14500;
						}
					}
				}

				.title-right {
					view:first-child {
						font-size: 30rpx;

						text {
							font-size: 48rpx;
							font-weight: 500;
							color: #F14500;
						}
					}
				}
			}

			// 搬小圆球
			.move {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 38rpx;
				height: 38rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				border-radius: 50%;
				background: #F14500;
				margin-right: 15rpx;
			}

			// 地址
			.address {

				// 双地址
				.addressTwo {
					.main-main {
						display: flex;
						border-bottom: 1px solid #F2F2F2;
						padding-bottom: 23rpx;

						// 运
						.move {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 38rpx;
							height: 38rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							border-radius: 50%;
							background: #F14500;
							margin-right: 15rpx;
						}

						.main-right {

							// 商家地址，用户地址
							.main-right-header {
								font-size: 26rpx;
								font-weight: 500;
								color: #3A3A3A;
							}

							// 商家电话，用户电话
							.main-right-footer {
								height: 35rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #979797;

								text {
									padding-left: 20rpx;
								}
							}

							.main-right-user {
								padding-top: 38rpx;
							}
						}
					}
				}
			}
		}

		.footer {
			width: 640rpx;
			margin: auto;
			// padding-left: 20rpx;
			padding: 23rpx 0 0 20rpx;

			.information-item {
				display: flex;
				// align-items: center;
				padding: 10rpx 0;

				.information-item-left {
					// width: 94rpx;
					width: 150rpx;
					height: 23rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #858585;
				}

				.information-item-right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #353535;

					// 复制
					.copy {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 54rpx;
						height: 26rpx;
						border: 1px solid #353535;
						border-radius: 13rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #353535;
						margin-left: 24rpx;
					}

					.information-item-right-main {
						text {
							color: #F14500;
						}
					}

					// 合计
					.amountTo {
						font-size: 30rpx;
						font-weight: 500;
						color: #F14500;
					}
				}
			}
		}
	}

	// 
	.footer-button {
		padding-top: 300rpx;

		image {
			width: 31rpx;
			height: 38rpx;
		}

		button {
			width: 684rpx;
			height: 80rpx;
			background: #F14500;
			border-radius: 40rpx;
			margin: auot;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.footer-buttonTwo {
		padding-top: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		view:first-child {
			display: flex;
			align-items: center;
			font-size: 35rpx;
			font-weight: 400;
			color: #F14500;
			margin-right: 30rpx;

			image {
				width: 31rpx;
				height: 38rpx;
			}

			text {
				padding-left: 15rpx;
			}
		}

		button {
			width: 400rpx;
			height: 69rpx;
			background: #F14500;
			border-radius: 40rpx;
			margin: auot;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.statuschang {
			width: 637rpx;
			// width: 700rpx;
			height: 69rpx;
			background: #F14500;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}

.commodityInformation {
	margin-top: 10px;

	.tradeName {
		margin-bottom: 5px;
	}

	.mobile {}

	.goods {
		color: #bbb;
	}
}
</style>